<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="16" class="margin-top">
          <Search :data="selections" :data-value="timeVlaue" :attribute="'plannedDate'" @change="handleTypeChange" @dateChange="handleDateChange" />
        </el-col>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="list" :span-method="arraySpanMethod" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="产品分类业绩（一级）" align="center">
          <el-table-column prop="dataName" :show-overflow-tooltip="true" />
          <el-table-column prop="type" :show-overflow-tooltip="true" />
        </el-table-column>
        <el-table-column label="来院量" prop="toHospitalNum" :show-overflow-tooltip="true" />
        <el-table-column label="成交量" prop="orderNum" :show-overflow-tooltip="true" />
        <el-table-column label="科室预收" prop="deptTotalPrice" :show-overflow-tooltip="true" />
        <el-table-column label="成交率" prop="conversion" :show-overflow-tooltip="true" />
        <el-table-column label="客单价" prop="customerPrice" :show-overflow-tooltip="true" />
        <el-table-column label="执行业绩" prop="performance" :show-overflow-tooltip="true" />
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
  </div>
</template>
<script>
import Search from "@/components/Search";
import { reports } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      selections: reports,
      timeVlaue: "",
      query: {},
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.timeVlaue = "yesterday";
    this.initQuery();
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await this.$api['statement/hospital/classification']({
        hospitalId: this.$store.getters.currentUserInfo.deptUsrList[0].hospitalId,
        date: this.query.plannedDate,
      });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.msg);
      this.list = res.data;
      // this.total = this.list.length;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getList();
    },
    // ele自定义方案
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex, '666');
      // 合并行列产品名字相同合并（计算组长度以内的列，需要进行合并操作的列）
      const mergeLength = 1;// 需要进行横纵合并的列
      if (columnIndex < mergeLength) {
        const finArray = [1, 1];
        // 处理行数据
        // const cgname = Object.keys(row)[columnIndex];
        const cgname = 'dataId';
        if (rowIndex === 0 || row[cgname] !== this.list[rowIndex - 1][cgname]) {
          let rowspan = 1;
          // 计算需要进行合并操作的行
          for (let i = 0; i < this.list.length - 1; i++) {
            // 只合并连续的
            if (this.list[i][cgname] === row[cgname] && this.list[i + 1][cgname] === row[cgname]) {
              rowspan++;
            }
          }
          finArray[0] = rowspan;
        } else {
          finArray[0] = 0;
        }
        // 处理列数据
        const colkeys = Object.keys(row);
        const cgvalue = Object.values(row)[columnIndex];
        if (columnIndex === 0 || row[colkeys[columnIndex - 1]] !== row[colkeys[columnIndex]]) {
          let colspan = 1;
          // 计算需要进行合并操作的列
          for (let i = columnIndex; i < mergeLength; i++) {
            // 只合并连续的
            if (row[colkeys[i]] === cgvalue && row[colkeys[i + 1]] === cgvalue && i + 1 < mergeLength) {
              colspan++;
            }
          }
          finArray[1] = colspan;
        } else {
          finArray[1] = 0;
        }
        return finArray;
      }
    },
    handleTypeChange(item) {
      Object.assign(this.query, item);
      this.getList();
    },
    handleDateChange(item) {
      Object.assign(this.query, item);
      this.getList();
    },
    dateHandle(date) {
      const dates = new Date(date);
      const year = dates.getFullYear();
      const month = dates.getMonth() + 1;
      const day = dates.getDate();
      return year + "-" + month + "-" + day;
    },
    initQuery() {
      const curDate = new Date();
      this.query.plannedDate = this.dateHandle(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)) + "_" + this.dateHandle(new Date(curDate.getTime() - 24 * 60 * 60 * 1000));
    },
  },
};
</script>
<style scoped lang="scss">
  .margin-top{
    margin-top: 10px;
  }
  /deep/.el-table__header tr:nth-of-type(2){
   display: none!important;
  }
</style>

